<template>
  <div>
    <div class="app-container" />

    <!-- 中 -->
    <div class="app-container">
      <el-card class="zh-card">
        <div class="zh">
          <span><i class="el-icon-tickets" />数据列表</span>
          <el-button size="mini">添加</el-button>
        </div>
      </el-card>
    </div>

    <div class="app-container">
      <el-card>
        <el-table :data="tableData" border>
          <el-table-column prop="num" label="编号" />
          <el-table-column prop="menu_name" label="菜单名称" />
          <el-table-column prop="menu_lv" label="菜单级数" />
          <el-table-column prop="front_name" label="前端名称" /><el-table-column
            prop="front_img"
            label="前端图标"
          />
          <el-table-column
            prop="open"
            label="是否显示"
          ><template slot-scope="take">
            <el-switch
              v-model="take.row.value"
              :active-value="1"
              :inactive-value="0"
              @change="changeValue($event, value)"
            />
          </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" />
          <el-table-column prop="setting" label="设置" />
          <el-table-column
            prop="operation"
            label="操作"
          ><template v-slot="{ row }">
            <el-button
              type="text"
              @click="editPermissson(row.id)"
            >编辑</el-button>
            <el-button
              type="text"
              @click="delPermission(row.id)"
            >删除</el-button>
          </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div id="ddd" class="el-pagination is-background">
      <span class="el-pagination__total">共 5 条</span><el-pagination
        :page-sizes="[15, 20, 30]"
        :page-size="100"
        layout="sizes, prev, pager, next"
        :total="40"
      /><span
        class="el-pagination__jump"
      >前往
        <div class="el-input el-pagination__editor is-in-pagination">
          <!----><input
            type="number"
            autocomplete="off"
            min="1"
            class="el-input__inner"
            max="1"
          >1<!----><!----><!---->
        </div>
        页</span>
    </div>
  </div>
</template>

<script>
import { MenuInfo } from '@/api/quanxian'
export default {
  data() {
    return {
      value: true,
      //   page: {
      //   page: 1, // 当前页码
      //   size: 10,
      //   total: 0 // 总数
      // },
      tableData: [
        {
          num: '1',
          menu_name: '商品',
          menu_lv: '一级',
          front_name: 'pms',
          front_img: '',
          value: 1,
          sort: '0',
          setting: '查看下级'
        },
        {
          num: '7',
          menu_name: '订单',
          menu_lv: '一级',
          front_name: 'oms',
          front_img: '',
          value: 1,
          sort: '0',
          setting: '查看下级'
        },
        {
          num: '12',
          menu_name: '营销',
          menu_lv: '一级',
          front_name: 'sms',
          front_img: '',
          value: 1,
          sort: '0',
          setting: '查看下级'
        },
        {
          num: '21',
          menu_name: '权限',
          menu_lv: '一级',
          front_name: 'ums',
          front_img: '',
          value: 1,
          sort: '0',
          setting: '查看下级'
        }
      ]
    }
  },
  // methods: {
  //   changePage(newPage) {
  //   this.page.page = newPage
  //   this.getEmployeeList()
  // }
  // },
  created() {
    this.getMenuInfo()
  },
  methods: {
    changeValue() {},
    async getMenuInfo() {
      const res = await MenuInfo()
      console.log(res)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
.up-card {
  .up {
    display: flex;
    justify-content: space-between;
  }
}

.zh-card {
  .zh {
    display: flex;
    justify-content: space-between;
  }
}

#ddd {
  display: flex;
  // justify-content: space-around;
  float: right;
  margin-right: 20px;
  justify-content: center;
  align-items: center;
  .el-pagination__total {
    margin-right: 10px;
    font-weight: 400;
    color: #606266;
  }
  .el-select .el-input .el-select__caret {
    color: #c0c4cc;
    font-size: 14px;
    transition: transform 0.3s;
    transform: rotate(180deg);
    line-height: 16px;
    cursor: pointer;
  }
  .el-input__icon {
    height: 100%;
    width: 25px px;
    text-align: center;
    transition: all 0.3s;
    line-height: 40px;
  }
  .el-input__inner {
    padding-right: 25px;
    border-radius: 3px;
    height: 28px;
  }
}
</style>
